<script setup>
import { getDepositDetail } from '@/api/my';

// 响应式数据
const orderId = ref(0);
const securityOrder = ref(null);

// 押金订单详情数据
const initDetailData = async (id) => {
  try {
    const res = await getDepositDetail(id);
    console.log('押金订单详情数据------>getDepositDetail', res);
    if (res && res.data) {
      securityOrder.value = res.data;
    }
  } catch (error) {
    console.error('押金订单详情数据错误:', error);
  }
};

/**
 * 生命周期函数--监听页面加载
 */
onLoad((options) => {
  console.log('options', options);
  if (options.id) {
    orderId.value = options.id;
    initDetailData(orderId.value);
  }
});
</script>

<template>
  <view class="container">
    <!-- 押金订单 -->
    <view class="deposit" v-if="securityOrder">
      <view class="order_row">
        <text class="label">押金订单</text>
        <text class="value">{{ securityOrder.uuid }}</text>
      </view>
      <!-- 支付时间 -->
      <view class="order_row">
        <text class="label">支付时间</text>
        <text class="value">{{ securityOrder.createTimeFormt }}</text>
      </view>
      <!-- 押金金额 -->
      <view class="order_row">
        <text class="label">押金金额</text>
        <text class="value">{{ securityOrder.security_fee }}元</text>
      </view>
      <!-- 支付流水 -->
      <view class="order_row">
        <text class="label">支付流水</text>
        <text class="value">{{ securityOrder.pay_uuid }}</text>
      </view>
      <!-- 支付渠道 -->
      <view class="order_row">
        <text class="label">支付渠道</text>
        <text class="value">{{ securityOrder.payWayText }}</text>
      </view>
      <!-- 押金状态 -->
      <view class="order_row">
        <text class="label">押金状态</text>
        <text class="value" :class="{ success: securityOrder.is_refund, pending: !securityOrder.is_refund, paid: !securityOrder.is_buy && !securityOrder.is_refund }">
          {{ securityOrder.is_buy ? '已购买' : securityOrder.is_refund ? '已提现' : '已缴纳' }}
        </text>
      </view>
    </view>

    <!-- 提现订单 -->
    <view class="withdrawal" v-for="item in initDetailData" :key="item.id">
      <view class="order_row">
        <text class="label">提现订单</text>
        <text class="value">{{ item.uuid }}</text>
      </view>
      <view class="order_row">
        <text class="label">提现时间</text>
        <text class="value">{{ item.create_timeFormat }}</text>
      </view>
      <view class="order_row">
        <text class="label">提现金额</text>
        <text class="value">{{ item.refund_fee }}元</text>
      </view>
      <view class="order_row" v-if="item.refund_status === '2'">
        <text class="label">退款流水</text>
        <text class="value">{{ item.refund_uuid }}</text>
      </view>
      <view class="order_row" v-if="item.refund_status === '2'">
        <text class="label">退款时间</text>
        <text class="value">{{ item.refund_timeFormat }}</text>
      </view>
      <view class="order_row">
        <text class="label">提现状态</text>
        <text class="value">
          {{ item.refund_status === '0' ? '默认' : item.refund_status === '1' ? '审核中' : item.refund_status === '2' ? '已退款' : '默认' }}
        </text>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
$light-color: #ececec;
$text-color: #000;
$success-color: #28a745;
$pending-color: #ffc107;
$paid-color: #f33a4c;

page {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: $light-color;
}
.container {
  padding: 30rpx;
  margin-bottom: 30rpx;
  .order_row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10rpx;
    height: 80rpx;
    line-height: 80rpx;
    border-bottom: 1px solid #ececec;
    .label {
      font-size: 30rpx;
      color: $text-color;
      font-weight: 400;
    }
    .value {
      font-size: 30rpx;
      color: #717171;
    }
    .success {
      color: $success-color;
    }
    .pending {
      color: $pending-color;
    }
    .paid {
      color: $paid-color;
    }
  }
}
</style>
